<template>
	<view>
		<!-- 内容区 -->
		<view class="lists">
			<!-- 视频 -->
			<view class="theItemOff"
				style="display: flex;justify-content: space-between;box-sizing: border-box;">
				<view class="videos-left video-lsits">
					<view class="video-item" v-for="(item, i) in groupList" :key="i" @tap='toPlayVideo(item)'>
						<!-- <image class="video-item-img" :src="item." mode="aspectFill"></image> -->
							<view class="item-img-box">
								<image class="video-item-img" :src="item.cover_url" mode="aspectFill"></image>
							</view>
							<view class="video-item-time">
								<text style="color: #FFFFFF;font-size: 20rpx;">{{item.video_time | filterVideoTime}}</text>
							</view>
							<view class="video-item-desc">
								<text style="color: #333333;font-weight: bold;padding-top: 10rpx;">{{item.title || ''}}</text>
								<text style="color: #666666;padding-top: 10rpx;">{{item.describe || ''}}</text>
								<!-- <text style="text-align: end;padding-top: 20rpx;color: #737373;"></text> -->
							</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupQuery: {
					group: '',
					offset: 1,
					limit: 10
				},
				groupList: []
			};
		},
		onLoad(o) {
			this.groupQuery.group = o.id
			this.groupContent()
		},
		filters: {
			filterVideoTime(time) {
				if (!time) {
					return ''
				}
				const second = parseInt(time / 60)
				const minute = (time % 60 + '').slice(0, 2)
				return `${second < 10 ? '0' + second : second}:${minute < 10 ? '0' + minute : minute}`
			},
			
		},
		methods: {
			async groupContent() {
				const res = await this.$http.request('/api/v1/shop/group', this.groupQuery, 'GET')
				if (res.code == 200) {
					this.groupList = res.data.data
					console.log(this.groupList)
				}
			},
			toPlayVideo(item) {
				uni.navigateTo({
					url: '/pages/teacher/video-play?videoInfo=' + JSON.stringify(item)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.lists {
	main-height: 100vh;
		padding-right: 20rpx;
		.item-img-box {
			position: relative;
			.fengmian {
				@include flex-center(100%, 80rpx);
				position: absolute;
				bottom: 5rpx;
				left: 0;
				background-color: rgba($color: #000000, $alpha: .5);
				color: #FFFFFF;
			}
		}
	}
	.content {
		background-color: #EFEEF6;
	}

	.teacher-info {
		height: 560rpx;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.detail {
		padding: 0 30rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
		height: 400rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	/* 头像和关注 */
	.detail-img {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// width: 300rpx;
		position: absolute;
		top: -50rpx;
	}

	.name {
		color: #4D4D4D;
		font-size: 40rpx;
		font-weight: bold;
	}

	.detail-img-name {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 关注 */
	.detail-heart {
		padding: 4rpx 20rpx;
		border: 3rpx solid #B91C27;
		border-radius: 40rpx;
	}

	/* 数据 */
	.detail-data {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.detail-data-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 50rpx;
	}

	.data-item-num {
		color: #4D4D4D;
		font-size: 40rpx;
	}

	.data-item-tip {
		color: #808080;
		font-size: 30rpx;
	}

	.detail-desc {
		color: #808080;
		padding: 30rpx 20rpx;
	}

	/* 选项卡 */
	.video-tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 200rpx;
		padding-top: 10rpx;
	}

	.tab-item {
		color: #666666;
		font-size: 34rpx;
	}

	.tab-item-active {
		color: #B91C27;
		font-size: 40rpx;
		padding-bottom: 10rpx;
		border-bottom: 3rpx solid #B91C27;
	}

	.theItemOff {
		
		
	}

	/* 集合列表 */
	.video-lsits {
		padding: 20rpx;
		padding-right: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.video-list-items {
		width: 100%;
		height: 251rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.video-list-items-img {
		width: 240rpx;
		height: 198rpx;
		@include flex-center();
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		& > image {
			width: 240rpx;
			height: 198rpx;
			border-radius: 20rpx;
		}
	}

	.video-list-items-img-time {
		background-color: rgba(0, 0, 0, 0.4);
		width: 160rpx;
		height: 50rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 20rpx 0 50rpx 0;
	}

	.video-list-items-desc {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		// margin-left: 40rpx;
		width: 366rpx;
		height: 210rpx;
	}

	.video-list-items-desc-price {
		display: flex;
		justify-content: flex-end;
	}

	/* 视频 */
	.video-item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background-color: #fff;
		border-radius: 20rpx;
		width: 345rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.video-item-time {
		background-color: rgba(0, 0, 0, 0.4);
		width: 140rpx;
		height: 50rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 20rpx 0 50rpx 0;
	}

	.video-item-img {
		width: 345rpx;
		height: 320rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.video-item-desc {
		padding: 20rpx 10rpx;
		display: flex;
		flex-direction: column;
	}

	.videos-left,
	.videos-right {
		width: 345rpx;
	}

	.videos-right {
		padding-left: 0;
		flex-direction: column;
		justify-content: flex-start;
	}

	.videos-right .video-item-img {
		height: 260rpx;
	}
</style>
